<template>
    <div>
        <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>

        <Card :bordered="false" :style="{marginBottom:'10px'}">
            <!--标题-->
            <div slot="title">
                <div class="hs-screen-box">
                    <div>活动弹框设置</div>
                </div>
            </div>

            <Form ref="formValidate" :model="params" :rules="ruleValidate" :label-width="130">
                <FormItem label="上传图片：" prop="image">
                    <div class="j-img-echo" style="width: 300px">
                        <template v-if="!params.image">
                            <Icon type="md-images" size="55" color="#c5c8ce" />
                        </template>
                        <template v-else>
                            <img :src="formatImage(params.image)">
                        </template>
                    </div>
                    <Upload :action="action" :headers="headers" :show-upload-list="false" name="file" :on-success="uploadSuccess">
                        <Button icon="ios-cloud-upload-outline" style="width:300px">上传图片</Button>
                    </Upload>
                </FormItem>
                <FormItem label="描述：" prop="title">
                    <Input v-model.trim="params.title" placeholder="请输入描述" style="width: 300px"></Input>
                </FormItem>
                <FormItem label="开启状态：" prop="isDisable">
                    <RadioGroup v-model="params.isDisable">
                        <Radio label="0" border>开启</Radio>
                        <Radio label="1" border>关闭</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="展示次数：" prop="appearNum">
                    <InputNumber :min="1"  v-model="params.appearNum" placeholder="请输入最多展示次数" style="width: 300px"></InputNumber>
                </FormItem>
                <FormItem label="">
                    <Button type="primary" style="width: 88px" @click="handleSubmit('formValidate')">保存</Button>
                </FormItem>
            </Form>
        </Card>
    </div>
</template>

<script>
    import hsBreadcrumb from '@/components/hs-breadcrumb';

    export default {
        data() {
            return {
                action: this.$uploadURL,
                headers: {
                    token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
                },
                // 参数
                params: {
                    title: '',
                    image: '',
                    appearNum: 0,
                    isDisable: '1',
                },
                ruleValidate:{
                    title: [
                        {required: true, message: '描述不能为空', trigger: 'change'}
                    ],
                    image: [
                        {required: true, message: '请上传活动图片', trigger: 'change'}
                    ],
                    appearNum: [
                        {required: true, message: '展示次数不能为空'}
                    ],
                    isDisable: [
                        {required: true, message: '请选择是否开启', trigger: 'change'}
                    ]
                },
                // 面包屑
                breadcrumb: [
                    {name: '首页', url: '', icon: 'ios-home-outline', size: 18},
                    {name: '活动弹框', url: '', icon: '', size: 0},
                    {name: '活动弹框设置', url: '', icon: '', size: 0}
                ]
            }
        },
        created() {
            // 签到设置-查询签到设置
            this.findActivityBounced();
        },
        methods: {
            // 点击提交验证
            handleSubmit(name) {
                // console.log(this.params);
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // 签到设置-保存签到设置
                        this.saveActivityBounced();
                    }
                })
            },
            // 活动弹框-查询活动弹框
            findActivityBounced() {
                this.axios.post('/activityBounced/findActivityBounced').then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        if (res.data){
                            this.params.title = res.data.title;
                            this.params.image = res.data.image;
                            this.params.appearNum = res.data.appearNum;
                            this.params.isDisable = res.data.isDisable.toString();
                        }
                    }
                    if (res.status == 201) {
                        this.$Message.error(res.msg);
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询活动弹框接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 活动弹框-保存活动弹框
            saveActivityBounced() {
                // 询问是否保存活动弹框
                this.$Modal.confirm({
                    title: `是否保存活动弹框？`,
                    onOk: () => {
                        // 保存签到设置
                        this.axios.post('/activityBounced/saveActivityBounced', this.params).then(res => {
                            console.log(res);
                            if (res.status == 200) {
                                this.$Message.success('操作成功.')
                            }
                            if (res.status == 201) {
                                this.$Message.error(res.msg);
                            }
                            if (res.status == 500) {
                                this.$Notice.error({
                                    title: '服务器内部错误',
                                    desc: '保存活动弹框接口报错',
                                    duration: 0
                                });
                            }
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 上传成功
            uploadSuccess(response, file, fileList) {
                console.log(response)
                if (response.status == 200) {
                    this.params.image = JSON.stringify([response.data]);
                }
                if (response.status == 201) {
                    this.$Message.error(response.msg);
                }
                if (response.status == 500) {
                    this.$Notice.error({
                        title: '服务器内部错误',
                        desc: '上传活动设置图片接口报错',
                        duration: 0
                    });
                }
            },
            // 格式化图片的显示
            formatImage(arr){
                if(arr){
                    return JSON.parse(arr)[0]
                }else{
                    return ''
                }
            }
        },
        components: {
            hsBreadcrumb
        }
    }
</script>

<style scoped>

</style>